<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* 
      position(定位)
        - 定位是一种更加高级的布局手段
        - 通过定位可以将元素摆放到页面的任意位置
        - 使用position属性来设置定位
            可选值：
                - static 默认值， 元素是静止的，没有开启定位
                - relative 开启元素的相对定位
                - absolute 开启元素的固定定位
                - fixed     固定定位
                - sticky    粘滞定位

        - 相对定位：
            - relative的特点：
                1. 开启了相对定位， 如果不设置偏移量，元素不会发生任何变化
                2. 相对定位元素在文档流中的位置来偏移
                3. 相对定位会提升元素的层级(在其他元素之上显示)
                4. 相对定位不会使元素脱离文档流
                5. 相对定位不会改变元素的性质， 块还是块， 行还是行
        
        - 偏移量（offset）
            - 开启了定位后可以使用偏移量来设置元素的位置
                - top
                    - 定位元素（开启了定位的元素）和定位位置上边的位置
                - bottom
                    - 垂直位置由top和bottom决定 
                - left
                - right
    */
      div {
        width: 200px;
        height: 200px;
      }
      .box1 {
        background-color: aqua;
      }
      .box2 {
        background-color: blanchedalmond;
        position: relative;
        top: -200px;
        right: -200px;
      }
      .box3 {
        background-color: brown;
      }
    </style>
  </head>
  <body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </body>
</html>
